<template>
  <div>
    <div class="switch">
      <div class="switch-left">
        <div class="box1" v-for="(v, index) in obj" :key="index" @click="fun()">
          <img :src="v.src" />
          <span>{{ v.txt }}</span>
        </div>
      </div>

    </div>

  </div>
</template>
 
<script>
export default {
  data() {
    return {
      obj: [
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/e6cc3a3326553c1454098c672a613ff9.jpg?1656468719200",
          txt: "女士套装",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/bc4db3c440a437c4f0c80162a4bdfa15.jpg?1672304078421",
          txt: "女士淡香",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/67da6300cecc18b1b07a66981e59d13d.jpg?1656472254077",
          txt: "女士淡香水",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/b464ddda1cdaca46410c1dbb130ca381.jpg?1656472841363",
          txt: "女士古龙水",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/0660a57df384c00932c82329422c4d39.jpg?1656473150057",
          txt: "扩香精",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/100d76112dbc1d29def7dc4f8b94c9e3.jpg?1656470937944",
          txt: "男士套装",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/cc9ec2f701e649ddfbdcccd7de5d4fa3.jpg?1672304245737",
          txt: "男士香精",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/0dc665e288d7a33a03136569fa7bc93e.jpg?1656472059576",
          txt: "男士gulong",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/8d6492d4fc42c20eca84fce4d6c6be63.jpg?1656472940420",
          txt: "面膜",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/7ce50554013cffc3141f85b4bf9944b9.png?1659942235063",
          txt: "查看更多",
        },
      ],

    };
  },
  methods: {
    fun() {
      this.$router.push('/xiasss')
    }
  }
};
</script>
 
<style scoped>
.switch {
  width: 98%;
  height: 48.66666667vw;
  /* margin: auto;
     margin-top: 16vw; */
  display: flex;
  overflow: auto;
  background: #f8f6f6;

}

.switch .switch-left {
  width: 98%;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
}

.switch .switch-right {
  width: 60%;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
}

.switch .switch-left .box1 {
  width: 20%;
  height: 50%;
  /* background: yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.switch .switch-right .box1 {
  width: 30%;
  height: 50%;
  /* background: yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.switch .box1 img {
  width: 10.66666667vw;
  margin-bottom: 2.66666667vw;
  border-radius: 50px;
}

.switch .box1 span {
  font-size: 3.2vw;
  color: #666666;
}
</style>